<script setup>
import { defineSchedule } from "../stores/scheduleStore.js";
import request from "../axios/axios.js";
import { defineUser } from "@/stores/userStore";
import { onMounted } from "vue";

let scheduleList = defineSchedule();
let sysUser = defineUser();

//请求获取用户的日程信息
async function getScheduleInfo() {
  let { data } = await request.get("/schedule/findAllSchedule", {
    params: {
      uid: sysUser.uid,
    },
  });
  //   console.log(data);
  scheduleList.itemList = data.data;
}

//使用钩子函数，在这个组件挂载到DOM树的时候
//也就是在每次访问这个页面的时候，获取最新的日程信息
onMounted(() => {
  getScheduleInfo();
});

//添加一项日程
async function addSchedule() {
  let { data } = await request.post("/schedule/addSchedule", {
    sid: null,
    uid: sysUser.uid,
    title: "",
    completed: 0,
  });
  if (data.code == 200) {
    getScheduleInfo();
  } else {
    alert("添加失败!");
  }
}
//保存修改内容，更新日程信息
async function updateItem(index) {
  console.log(index);
  console.log(scheduleList.itemList[index]);
  let { data } = await request.post(
    "/schedule/updateSchedule",
    scheduleList.itemList[index]
  );
  if (data.code == 200) {
    getScheduleInfo();
  } else {
    alert("修改失败!");
  }
}

async function removeItem(index) {
  let { data } = await request.get("/schedule/deleteSchedule", {
    params: {
      sid: scheduleList.itemList[index].sid,
    },
  });
  if (data.code == 200) {
    getScheduleInfo();
  } else {
    alert("删除失败！");
  }
}
</script>

<template>
  <div>
    <h3 class="ht">您的日程如下</h3>
    <table class="tab" cellspacing="0px">
      <tr class="ltr">
        <th>编号</th>
        <th>内容</th>
        <th>进度</th>
        <th>操作</th>
      </tr>
      <tr
        class="ltr"
        v-for="(item, index) in scheduleList.itemList"
        :key="item.uid"
      >
        <td v-text="index + 1"></td>
        <td>
          <input type="text" class="tdt" v-model="item.title"/>
        </td>
        <td>
          <input type="radio" value="0" v-model="item.completed" />未完成
          <input type="radio" value="1" v-model="item.completed" />已完成
        </td>
        <td class="buttonContainer">
          <button class="btn1" @click="removeItem(index)">删除</button>
          <button class="btn1" @click="updateItem(index)">保存修改</button>
        </td>
      </tr>
      <tr class="ltr buttonContainer">
        <td colspan="4">
          <button class="btn1" @click="addSchedule(index)">新增日程</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
.tdt{
  width: 98%;
  height: 90%;
}
.ht {
  text-align: center;
  color: cadetblue;
  font-family: 幼圆;
}
.tab {
  width: 80%;
  border: 5px solid cadetblue;
  margin: 0px auto;
  border-radius: 5px;
  font-family: 幼圆;
  text-align: center;
}
.ltr td {
  border: 1px solid powderblue;
  height: 30px;
}
.ipt {
  border: 0px;
  width: 50%;
}
.btn1 {
  border: 2px solid powderblue;
  border-radius: 4px;
  width: 100px;
  background-color: antiquewhite;
}
#usernameMsg,
#userPwdMsg {
  color: gold;
}

.buttonContainer {
  text-align: center;
}
</style>
